<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toDetails">
				</image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.Recharge}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask">
				</image>
			</view>
		</view>
		<view class="b-mox-certer">
			<view class="rerc-text">
				<view class="rc-title">
					{{$data.$language.Recharglimit}}
				</view>
				<view class="rc-input">
					<view class="">
						USDT
					</view>
					<input type="number" :placeholder="$data.$language.Pleaseenter" v-model="modelIput"
						@input="monbrninput">
				</view>
			</view>
		</view>
		<view class="btn" @click="getRechargeBtn">
			{{$data.$language.Recharge}}
		</view>
		<view style="width: 100%;height: 50rpx;">

		</view>
	</view>
</template>

<script>
	import Web3 from 'web3';
	// var  web3 = new Web3(Web3.givenProvider)
	const web3 = new Web3(window.ethereum);
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	import {
		Recharge,
		zhuanShu,
		Moteygetaddress
	} from '@/api/index.js';
	
	//合约abi
	import abi from "@/utils/web3/abi.js"
	
	
	
	export default {
		data() {
			return {
				// $language: uni.getStorageSync('locale') == 'en-US' ? enUS : zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				modelIput: '',
				showmonShow: true,
				Receivingaddress:'',

			}
		},
		onReachBottom() {},
		onLoad() {
			// this.modelIput = parseInt(this.modelIput)
			// console.log(this.modelIput)
			var translate = uni.getStorageSync('locale')
			if (translate == 'en-US') {
				this.$data.$language = enUS
			} else if (translate == 'zh-CN') {
				this.$data.$language = zhCN
			} else {
				this.$data.$language = trCN
			}
			this.moeteygetaddss()
		},
		methods: {
			moeteygetaddss(){
				Moteygetaddress((data) => {
						this.Receivingaddress = data
						console.log(this.Receivingaddress,'收款钱包地址')
					},
					(errorMsg) => {
						
					},
				);
			},
			monbrninput(e) {
				console.log(e)
			},
			getRechargeBtn() {
				if (this.showmonShow) {
					if (!this.modelIput || this.modelIput <= 0) {
						var Pleaseenter = this.$data.$language.Pleaseenter
						uni.showToast({
							title: Pleaseenter,
							icon: 'none',
							duration: 2000
						})
						return
					}
					this.showmonShow = false
					var inmobenmontey = this.$data.$language.inmobenmontey
					uni.showLoading({
						title: inmobenmontey
					});
					// 钱包地址
					var accountsUrl = uni.getStorageSync('accountsUrl')

					// 合约地址
					var contractAddress = '0x55d398326f99059fF775485246999027B3197955'
					var contract = new web3.eth.Contract(abi, contractAddress);
					// var addreslise = '0xb9440664d1278C6CBDA5f4085E13ac120ddb2e50' //收款地址
					var addreslise = this.Receivingaddress //收款地址
					var Receivedquantity = parseInt(this.modelIput) * 1000000000000000000 // 收款数量
					var Receivedquantity = Receivedquantity.toString() // 收款数量myNumber.toString()

					// console.log(typeof Receivedquantity, '数据')

					// console.log(addreslise,'收款地址')
					// console.log(Receivedquantity,'收款数量')

					// debugger
					var that = this
					// that.RechargeListBtn()
					// that.RechargeListBtn('0x1111')
					contract.methods.transfer(addreslise, Receivedquantity).send({
						from: accountsUrl
					}).on('receipt', function(receipt) {
						console.log(receipt, '123');
						that.RechargeListBtn(receipt.transactionHash)
					}).catch(err => {
						console.log('失败了')
						this.showmonShow = true
						uni.hideLoading();
						var Transaction = this.$data.$language.Transaction
						uni.showToast({
							title: Transaction,
							icon: "none",
							duration: 2000
						})
					})
				}
			},
			RechargeListBtn(haxi) {
				Recharge({
						hash: haxi,
					},
					(data) => {
						this.showmonShow = true
						uni.hideLoading();
						// 处理成功返回的数据
						var Rechsuccis = this.$data.$language.Rechsuccis
						uni.showToast({
							title: Rechsuccis,
							icon: "none",
							duration: 2000
						})
					},
					(errorMsg) => {
						this.showmonShow = true
						uni.hideLoading();
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					},
				);
			},
			refreshLanguage(locale) {
				if (locale === 'zh-CN') {
					this.$language = zhCN
				} else if (locale === 'en-US') {
					this.$language = enUS
				} else {
					this.$language = trCN
				}
				uni.reLaunch({
					url: '/pages/Recharge/Recharge'
				});

			},
			toDetails() {
				// uni.navigateTo({
				// 	url: '/pages/details/details'
				// })
				uni.navigateTo({
					url: '/pages/walletAll/walletAll'
				})
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
		},

		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box {
		width: 750rpx;
		background-color: #FFFFFF !important;
	}

	.head {
		padding: 40rpx;
	}

	.headline {
		display: flex;
	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin: 28.85rpx 0 0 158rpx;
	}

	.b-mox-certer {
		width: 100%;
		padding: 0 24rpx;

		.rerc-text {
			width: 702rpx;
			height: 298rpx;
			background: #F4F6FA;
			border-radius: 16rpx;

			.rc-title {
				padding: 44rpx 0 0 44rpx;
				color: #000000;
				font-size: 24rpx;
				margin-bottom: 32rpx;
				box-sizing: border-box;
			}

			.rc-input {
				width: 638rpx;
				height: 116rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: auto;
				display: flex;
				padding: 0 24rpx;
				box-sizing: border-box;

				view {
					width: 172rpx;
					height: 116rpx;
					line-height: 116rpx;
					font-weight: 400;
					color: #000000;
					font-size: 32rpx;
				}

				input {
					width: 440rpx;
					height: 116rpx;
					border: none;
					text-align: right;
					color: #666666;
					font-size: 32rpx;
				}
			}
		}
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #0762FF;
		border-radius: 12rpx;
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>